<template>
  <div >
    <div class="main">
      <div class="side-step">
        <div class="step-absolute">
          <div :class="{'step-item': true, 'active': active === item.code} " @click="jumpClick(item.code)" v-for="(item, index) in sideList" :key="index">
            <span>{{ item.label }}</span>
          </div>
        </div>
      </div>
      <div class="content-wrap">
        <div class="header">
          <div class="main-title">华润三九项目</div>
          <div class="btn-wrap">
            <!--            <el-button plain @click="exportPage">导出</el-button>-->
          </div>
        </div>
        <div class="table-group" ref="basicInfo">
          <div class="table-item">
            <div class="table-header leave-1">
              一、基本信息
            </div>
            <el-table
                :data="basicData"
                border
                :show-header="false"
                style="width: 100%">
              <el-table-column
                  prop="title"
                  label="">
              </el-table-column>
              <el-table-column
                  prop="value"
                  align="right"
                  label="">
              </el-table-column>
            </el-table>
          </div>
          <div class="table-item">
            <div class="table-header leave-2">
              1.1 工商信息
            </div>
            <el-table
                :data="businessData"
                border
                :show-header="false"
                style="width: 100%">
              <el-table-column
                  prop="title"
                  label="">
              </el-table-column>
              <el-table-column
                  prop="value"
                  align="right"
                  label="">
              </el-table-column>
            </el-table>
          </div>
          <div class="table-item">
            <div class="table-header leave-2">
              1.2 交易对手联系人
            </div>
            <el-table
                :data="counterpartyContactData"
                border
                style="width: 100%">
              <el-table-column
                  prop="name"
                  align="left"
                  label="姓名">
              </el-table-column>
              <el-table-column
                  prop="phone"
                  align="left"
                  label="联系电话">
              </el-table-column>
              <el-table-column
                  prop="email"
                  align="left"
                  label="邮箱">
              </el-table-column>
              <el-table-column
                  prop="fax"
                  align="left"
                  label="传真">
              </el-table-column>
            </el-table>
          </div>
          <div class="table-item">
            <div class="table-header leave-2">
              （三）项目成员
            </div>
            <el-table
                :data="projectMembersData"
                border
                style="width: 100%">
              <el-table-column
                  prop="name"
                  align="left"
                  label="姓名">
              </el-table-column>
              <el-table-column
                  prop="department"
                  align="left"
                  label="部门">
              </el-table-column>
              <el-table-column
                  prop="role"
                  align="left"
                  label="项目角色">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="table-group" ref="index">
          <div class="table-item">
            <div class="table-header leave-1">
              二、业绩指标
            </div>
            <el-table
                :data="indexData"
                border
                :show-header="false"
                style="width: 100%">
              <el-table-column
                  prop="title"
                  label="">
              </el-table-column>
              <el-table-column
                  prop="value"
                  align="right"
                  label="">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="table-group" ref="financialData">
          <div class="table-item">
            <div class="table-header leave-1">
              三、财务数据
            </div>
            <el-table
                :data="financialData"
                border
                :show-header="false"
                style="width: 100%">
              <el-table-column
                  prop="title"
                  label="">
              </el-table-column>
              <el-table-column
                  prop="value"
                  align="right"
                  label="">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="table-group" ref="agreementInfo">
          <div class="table-item">
            <div class="table-header leave-1">
              四、协议信息
            </div>
            <div class="table-header leave-2">
              4.1 保密协议情况
            </div>
            <el-table
                :data="confidentialityAgreement"
                border
                style="width: 100%">
              <el-table-column
                  prop="name"
                  align="left"
                  label="协议名称">
              </el-table-column>
              <el-table-column
                  prop="remark"
                  align="left"
                  label="协议摘要">
              </el-table-column>
              <el-table-column
                  prop="signDate"
                  align="left"
                  label="签约时间">
              </el-table-column>
            </el-table>
          </div>
          <div class="table-item">
            <div class="table-header leave-2">
              4.2 投资协议情况
            </div>
            <el-table
                :data="investmentAgreement"
                border
                style="width: 100%">
              <el-table-column
                  prop="name"
                  align="left"
                  label="协议名称">
              </el-table-column>
              <el-table-column
                  prop="remark"
                  align="left"
                  label="协议摘要">
              </el-table-column>
              <el-table-column
                  prop="money"
                  align="left"
                  label="协议金额（元）">
              </el-table-column>
              <el-table-column
                  prop="signDate"
                  align="left"
                  label="签约时间">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="table-group" ref="transactionData">
          <div class="table-item">
            <div class="table-header leave-1">
              五、交易数据
            </div>
            <div class="table-header leave-2">
              5.1 项目出资情况
            </div>
            <div class="table-header leave-3">
              截至2022年10月11日，累计出资金额为800,000.00元，其中首次出资日期为2022年03月13日。
            </div>
            <el-table
                :data="projectContributionData"
                border
                style="width: 100%">
              <el-table-column
                  prop="number"
                  align="left"
                  label="序号">
              </el-table-column>
              <el-table-column
                  prop="money"
                  align="left"
                  label="实际出资金额（元）">
              </el-table-column>
              <el-table-column
                  prop="payDate"
                  align="left"
                  label="实际付款日期">
              </el-table-column>
              <el-table-column
                  prop="proportion"
                  align="left"
                  label="交易后持股比例">
              </el-table-column>
            </el-table>
          </div>
          <div class="table-item">
            <div class="table-header leave-2">
              5.2 项目分红情况
            </div>
            <div class="table-header leave-3">
              截至2022年10月31日，累计分红金额为15,000.00元。
            </div>
            <el-table
                :data="projectBonusData"
                border
                style="width: 100%">
              <el-table-column
                  prop="number"
                  align="left"
                  label="序号">
              </el-table-column>
              <el-table-column
                  prop="money"
                  align="left"
                  label="分红金额（元）">
              </el-table-column>
              <el-table-column
                  prop="date"
                  align="left"
                  label="交易日期">
              </el-table-column>
            </el-table>
          </div>
          <div class="table-item">
            <div class="table-header leave-2">
              5.3 项目退出情况
            </div>
            <div class="table-header leave-3">
              截至2022年10月11日，累计退出金额为319,118元，其中已退出成本219,118元，已退出收益100,000。
            </div>
            <el-table
                :data="projectExitData"
                border
                style="width: 100%">
              <el-table-column
                  prop="number"
                  align="left"
                  label="序号">
              </el-table-column>
              <el-table-column
                  prop="exitCost"
                  align="left"
                  label="退出成本（元）">
              </el-table-column>
              <el-table-column
                  prop="exitProfit"
                  align="left"
                  label="退出收益（元）">
              </el-table-column>
              <el-table-column
                  prop="proportion"
                  align="left"
                  label="交易后持股比例">
              </el-table-column>
            </el-table>
          </div>
          <div class="table-item">
            <div class="table-header leave-2">
              5.4 项目其他收入情况
            </div>
            <div class="table-empty">暂无记录</div>
          </div>
          <div class="table-item">
            <div class="table-header leave-2">
              5.5 项目股权变更情况
            </div>
            <div class="table-empty">暂无记录</div>
          </div>
        </div>
        <div class="table-group" ref="risk">
          <div class="table-item">
            <div class="table-header leave-1">
              六、风险情况
            </div>
            <div class="table-header leave-2">
              6.1 2022Q3项目整体自评分类：红档
            </div>
            <div class="table-header leave-3">
              定量指标评估
            </div>
            <el-table
                :data="risk1Data"
                border
                style="width: 100%">
              <el-table-column
                  prop="name"
                  align="left"
                  label="指标名称">
              </el-table-column>
              <el-table-column
                  prop="assessment"
                  align="left"
                  label="系统评估">
              </el-table-column>
              <el-table-column
                  prop="selfAssessment"
                  align="left"
                  label="团队自评">
              </el-table-column>
              <el-table-column
                  prop="remark"
                  align="left"
                  label="情况说明">
              </el-table-column>
            </el-table>
          </div>
          <div class="table-item">
            <div class="table-header leave-3">
              定性指标评估
            </div>
            <el-table
                :data="risk2Data"
                border
                style="width: 100%">
              <el-table-column
                  prop="name"
                  align="left"
                  label="指标名称">
              </el-table-column>
              <el-table-column
                  prop="selfAssessment"
                  align="left"
                  label="团队自评">
              </el-table-column>
              <el-table-column
                  prop="remark"
                  align="left"
                  label="情况说明">
              </el-table-column>
            </el-table>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    invoke: Function,
  },
  data() {
    return {
      sideList: [
        {
          label: '基本信息',
          code: 'basicInfo',
        },
        {
          label: '业绩指标',
          code: 'index',
        },
        {
          label: '财务数据',
          code: 'financialData',
        },
        {
          label: '协议信息',
          code: 'agreementInfo',
        },
        {
          label: '交易数据',
          code: 'transactionData',
        },
        {
          label: '风险情况',
          code: 'risk',
        },
      ],
      basicData: [
        {
          title: '项目名称',
          value: '华润三九项目',
        },
        {
          title: '目标公司',
          value: '华润三九医药股份有限公司',
        },
        {
          title: '行业标签',
          value: '只要与生物科技服务',
        },
        {
          title: '项目来源',
          value: 'FA推荐',
        },
        {
          title: '投资阶段',
          value: '种子期',
        },
        {
          title: '项目简介',
          value: '华润三九医药股份有限公司（简称华润三九）是大型国有控股医药上市公司，主要 从事药品的研发、生产、销售及相关健康服务',
        },
        {
          title: '项目负责人',
          value: '严莉莉',
        },
      ],
      businessData: [
        {
          title: '公司全称',
          value: '华润三九医药股份有限公司',
        },
        {
          title: '成立时间',
          value: '2017-12-11',
        },
        {
          title: '公司官网',
          value: 'http://www.huarun.com.cn',
        },
        {
          title: '注册资本（元）',
          value: '2000,000.00',
        },
        {
          title: '实缴资本（元）',
          value: '2000,000.00',
        },
        {
          title: '法人代表',
          value: '张大镪',
        },
        {
          title: '注册地址',
          value: '北京市朝阳区中信大厦',
        },
        {
          title: '公司情况',
          value: '华润三九医药股份有限公司(简称“华润三九”)是大型国有控股医药上市公司,主要从事医药产品的研发、生产、销售及相关健康服务。上市以来,公司多次获评中国主板上市公司“价值百强”、“金牛百强”企业。截止目前,华润三九被纳入深证成份指数、中证500、MSCI新兴市场指数和富时罗素(FTSERussell)。 ',
        },
      ],
      counterpartyContactData: [
        {
          name: '张松',
          phone: '13839617702',
          email: '13839617702@163.com',
          fax: '',
        },
        {
          name: '宋轶',
          phone: '13733958862',
          email: '13733958862@163.com',
          fax: '',
        },
        {
          name: '王维权',
          phone: '137339587733',
          email: '137339587733@163.com',
          fax: '',
        },
      ],
      projectMembersData: [
        {
          name: '严莉莉',
          department: '资产管理部',
          role: '项目负责人',
        },
        {
          name: '凯乐',
          department: '资产管理部',
          role: '项目成员',
        },
        {
          name: '王博',
          department: '资产管理部',
          role: '项目成员',
        },
      ],
      indexData: [
        {
          title: '累计出资金额（元）',
          value: '800,000.00',
        },
        {
          title: '已退出成本（元）',
          value: '230,000.00',
        },
        {
          title: '已退出收益（元）',
          value: '75,000.00',
        },
        {
          title: '累计退出金额（元）',
          value: '305,000.00',
        },
        {
          title: '累计分红金额（元）',
          value: '15,000.00',
        },
        {
          title: '最新持股比例',
          value: '8.55%',
        },
        {
          title: '最新估值（元）',
          value: '630,000.00',
        },
        {
          title: 'IRR',
          value: '12.55%',
        },
        {
          title: 'MOC',
          value: '21.38%',
        },
        {
          title: '总收益（元）',
          value: '90,000.00',
        },
      ],
      financialData: [
        {
          title: '内部收益率',
          value: '38.50%',
        },
        {
          title: 'MOIC',
          value: '12.55%',
        },
        {
          title: 'DPI',
          value: '7.38%',
        },
        {
          title: '资产负债率',
          value: '10.07%',
        },
        {
          title: '股东权益比率',
          value: '9.59%',
        },
        {
          title: '产权比率',
          value: '10.55%',
        },
      ],

      confidentialityAgreement: [
        {
          name: '华润三九保密协议',
          remark: '协议约定双方就投资相关信息进行保密，协议于2022-01-13日起生效；',
          signDate: '2022-01-13',
        },
      ],
      investmentAgreement: [
        {
          name: '华润三九投资协议',
          remark: '该协议约定出自金额900,000.00元，预计于2022-04-13日付款；',
          money: '900,000.00',
          signDate: '2022-04-13',
        },
      ],

      // 五、交易数据
      projectContributionData: [
        {
          number: 1,
          money: '76,394.00',
          payDate: '2022-03-13',
          proportion: '1.55%',
        },
        {
          number: 2,
          money: '81,394.00',
          payDate: '2022-04-03',
          proportion: '3.83%',
        },
        {
          number: 3,
          money: '76,500.00',
          payDate: '2022-05-17',
          proportion: '7.00%',
        },
        {
          number: 4,
          money: '665,850.00',
          payDate: '2022-05-29',
          proportion: '8.47%',
        },
      ],
      projectBonusData: [
        {
          number: 1,
          money: '7,000.00',
          date: '2022-06-13',
        },
        {
          number: 2,
          money: '7,000.00',
          date: '2022-07-27',
        },
      ],
      projectExitData: [
        {
          number: 1,
          exitCost: '16,394.38',
          exitProfit: '5,394.38',
          proportion: '8.55%',
        },
        {
          number: 1,
          exitCost: '26,394.38',
          exitProfit: '4,394.38',
          proportion: '7.83%',
        },
      ],
      projectOtherIncomeData: [
        {
          name: '华润三九投资协议',
          remark: '该协议约定出自金额900,000.00元，预计于2022-04-13日付款；',
          money: '900,000.00',
          signDate: '2022-04-13',
        },
      ],
      projectEquityChangeData: [
        {
          name: '华润三九投资协议',
          remark: '该协议约定出自金额900,000.00元，预计于2022-04-13日付款；',
          money: '900,000.00',
          signDate: '2022-04-13',
        },
      ],

      // 六、风险情况
      risk1Data: [
        {
          name: '项目回报倍数',
          assessment: '红档',
          selfAssessment: '红档',
          remark: '-',
        },
        {
          name: '内部收益率',
          assessment: '红档',
          selfAssessment: '红档',
          remark: '-',
        },
        {
          name: '公司营收整体增长情况',
          assessment: '红档',
          selfAssessment: '红档',
          remark: '-',
        },
      ],
      risk2Data: [
        {
          name: '高风险业务情况',
          selfAssessment: '红档',
          remark: '-',
        },
        {
          name: '公司业务整体评价',
          selfAssessment: '红档',
          remark: '-',
        },
        {
          name: '核心管理层变动情况',
          selfAssessment: '红档',
          remark: '-',
        },
      ],
      active: 'basicInfo'
    }
  },
  methods: {
    jumpClick(target) {
      this.active = target;
      this.$refs[target].scrollIntoView(true);
    },
    exportPage() {
      window.print();
    },
  },
  mounted() {
    this.invoke('finance_event_search', {aaa:1111})
  }
}
</script>

<style scoped lang="less">
.main-title {
  font-size: 24px;
  font-weight: bolder;
  color: #5582F3;
}

.main {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;

  .side-step {
    background-color: #fff;
    position: fixed;
    left: 120px;
    top: 300px;
    z-index: 9;
    .step-absolute {
      width: 120px;
      padding: 10px 8px;
      border: 0 solid #E5E5E5;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
      .step-item {
        display: inline-block;
        width: 100%;
        border-left: 1px solid #D9D9D9;
        line-height: 32px;
        font-size: 12px;
        color: #212121;
        cursor: pointer;
        padding-left: 8px;
        height: 32px;
        position: relative;
        &:hover {
          color: #5582F3;
        }
        &.active {
          color: #5582F3;
          &:after {
            content: '';
            width: 1px;
            height: 16px;
            background-color: #5582F3;
            position: absolute;
            left: 0;
            top: 8px;
          }
        }
      }
    }
  }

  .content-wrap {
    width: 100%;
    padding: 30px 50px 30px 270px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 30px;
    }

    .table-group {
      width: 100%;
      padding-bottom: 40px;
    }
    .table-item {
      width: 100%;
    }
    .table-header {
      padding-left: 10px;
      &.leave-1 {
        font-weight: 400;
        font-size: 24px;
        line-height: 36px;
        height: 36px;
        color: #fff;
        background: linear-gradient(270deg, rgba(85,130,243,0.00) 0%, #5582F3 100%);
        margin-bottom: 20px;
      }
      &.leave-2 {
        color: #5582F3;
        font-size: 18px;
        height: 24px;
        line-height: 24px;
        margin: 20px 0;
      }
      &.leave-3 {
        background-color: #F2F2F2;
        color: #212121;
        height: 40px;
        font-size: 12px;
        line-height: 40px;
        border: 1px solid #D9D9D9;
        border-bottom: 0;
      }
    }
  }
}
</style>